import React, { useEffect, useState } from 'react';

export default function Home() {
  const [isVisible, setIsVisible] = useState({});
  
  // Articles data based on Figma design
  const articles = [
    {
      title: "Let's Get Solution For Building Construction Work",
      date: "26 December,2022",
      category: "Kitchen Design",
      image: "https://picsum.photos/seed/article1/400/300"
    },
    {
      title: "Low Cost Latest Invented Interior Designing Ideas.",
      date: "22 December,2022",  
      category: "Living Design",
      image: "https://picsum.photos/seed/article2/400/300"
    },
    {
      title: "Best For Any Office & Business Interior Solution",
      date: "25 December,2022",
      category: "Interior Design", 
      image: "https://picsum.photos/seed/article3/400/300"
    }
  ];

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            setIsVisible(prev => ({
              ...prev,
              [entry.target.id]: true
            }));
          }
        });
      },
      { threshold: 0.1 }
    );

    // 观察所有需要动画的元素
    const elements = document.querySelectorAll('[data-animate]');
    elements.forEach(el => observer.observe(el));

    return () => observer.disconnect();
  }, []);

  return (
    <div className="min-h-screen bg-white">
      {/* Navigation */}
      <nav className="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-sm z-50 border-b border-gray-100">
        <div className="max-w-7xl mx-auto px-6 py-4">
          <div className="flex items-center justify-between">
            <div className="text-2xl font-serif text-gray-900 hover:text-orange-500 transition-colors duration-300">Interno</div>
            <div className="hidden md:flex items-center space-x-8">
              {['Home', 'About', 'Services', 'Pages', 'Contact'].map((item, index) => (
                <a 
                  key={item}
                  href="#" 
                  className="text-gray-700 hover:text-orange-500 transition-all duration-300 transform hover:scale-105 relative group"
                  style={{ animationDelay: `${index * 100}ms` }}
                >
                  {item}
                  <span className="absolute bottom-0 left-0 w-0 h-0.5 bg-orange-500 transition-all duration-300 group-hover:w-full"></span>
                </a>
              ))}
            </div>
          </div>
        </div>
      </nav>

      {/* Hero Section */}
      <section className="pt-24 pb-20 bg-gradient-to-br from-gray-50 to-orange-50 overflow-hidden">
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div 
              className="space-y-8 animate-fade-in-left"
              id="hero-text"
              data-animate
            >
              <h1 className="text-5xl lg:text-6xl font-serif text-gray-900 leading-tight transform transition-all duration-1000 translate-y-8 opacity-0 animate-slide-up">
                Let Your Home<br />
                <span className="text-orange-500 animate-pulse-slow">Be Unique</span>
              </h1>
              <p className="text-lg text-gray-600 max-w-md leading-relaxed transform transition-all duration-1000 delay-300 translate-y-8 opacity-0 animate-slide-up-delay">
                There are many variations of the passages of lorem Ipsum from available, majority.
              </p>
              <button className="group bg-gray-900 text-white px-8 py-4 rounded-xl hover:bg-orange-500 transition-all duration-500 flex items-center space-x-3 transform hover:scale-105 hover:shadow-lg animate-bounce-gentle">
                <span className="font-medium">Get Started</span>
                <svg className="w-5 h-5 group-hover:translate-x-2 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
                </svg>
              </button>
            </div>
            <div className="relative animate-fade-in-right">
              <div className="relative w-full h-96 rounded-3xl overflow-hidden transform transition-all duration-700 hover:scale-105 hover:shadow-2xl">
                <img 
                  src="https://picsum.photos/seed/interior-hero/1200/800"
                  alt="Modern Interior Design"
                  className="w-full h-full object-cover animate-ken-burns"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
                <div className="absolute bottom-6 left-6 right-6 bg-white/90 backdrop-blur-sm rounded-xl p-4 transform translate-y-4 opacity-0 animate-slide-up-delay-long">
                  <p className="text-sm font-medium text-gray-800">Award Winning Design</p>
                  <p className="text-xs text-gray-600">Professional Interior Solutions</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Services Section */}
      <section className="py-20" id="services" data-animate>
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16 transform transition-all duration-1000 translate-y-8 opacity-0" id="services-title">
            <h2 className="text-4xl font-serif text-gray-900 mb-6 animate-fade-in">
              We Create The Art Of Stylish Living Stylishly
            </h2>
            <p className="text-gray-600 max-w-3xl mx-auto text-lg leading-relaxed animate-fade-in-delay">
              It is a long established fact that a reader will be distracted by the of readable content of a page when lookings at its layouts the points of using.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              {
                title: "Project Plan",
                description: "There are many variations of the passages of lorem Ipsum from available, majority.",
                icon: (
                  <svg className="w-8 h-8 text-orange-500 group-hover:scale-110 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
                  </svg>
                ),
                image: "https://picsum.photos/seed/plan/400/300"
              },
              {
                title: "Interior Work",
                description: "There are many variations of the passages of lorem Ipsum from available, majority.",
                icon: (
                  <svg className="w-8 h-8 text-orange-500 group-hover:scale-110 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                  </svg>
                ),
                image: "https://picsum.photos/seed/interior/400/300"
              },
              {
                title: "Realization",
                description: "There are many variations of the passages of lorem Ipsum from available, majority.",
                icon: (
                  <svg className="w-8 h-8 text-orange-500 group-hover:scale-110 transition-transform duration-300" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                  </svg>
                ),
                image: "https://picsum.photos/seed/realization/400/300"
              }
            ].map((service, index) => (
              <div 
                key={index} 
                className="group text-center p-8 rounded-2xl bg-white hover:bg-orange-50 transition-all duration-500 hover:shadow-xl border border-gray-100 transform hover:scale-105 animate-fade-in-up"
                style={{ animationDelay: `${index * 200}ms` }}
              >
                <div className="w-16 h-16 bg-orange-100 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:bg-orange-200 transition-all duration-300 group-hover:rotate-6">
                  {service.icon}
                </div>
                <h3 className="text-xl font-semibold text-gray-900 mb-4 group-hover:text-orange-600 transition-colors duration-300">{service.title}</h3>
                <p className="text-gray-600 leading-relaxed">{service.description}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* About Section */}
      <section className="py-20 bg-gray-50" id="about" data-animate>
        <div className="max-w-7xl mx-auto px-6">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
            <div className="relative group animate-fade-in-left">
              <div className="w-full h-96 rounded-3xl overflow-hidden shadow-2xl transform transition-all duration-700 group-hover:scale-105">
                <img 
                  src="https://picsum.photos/seed/about/1000/800"
                  alt="Interior Design Process"
                  className="w-full h-full object-cover animate-ken-burns-slow"
                />
                <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent"></div>
              </div>
            </div>
            <div className="space-y-8 animate-fade-in-right">
              <h2 className="text-4xl font-serif text-gray-900 leading-tight transform transition-all duration-1000 hover:text-orange-600">
                We Create The Art Of Stylish Living Stylishly
              </h2>
              <p className="text-gray-600 text-lg leading-relaxed">
                It is a long established fact that a reader will be distracted by the of readable content of a page when lookings at its layouts the points of using lorem Ipsum is that it has a more-or-less normal.
              </p>
              <div className="flex items-center space-x-4 group cursor-pointer">
                <div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center group-hover:bg-orange-200 transition-all duration-300 group-hover:scale-110">
                  <svg className="w-6 h-6 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                  </svg>
                </div>
                <span className="text-lg text-gray-700 font-medium group-hover:text-orange-600 transition-colors duration-300">Call Us For Free Consultation</span>
              </div>
              <button className="bg-gray-900 text-white px-8 py-4 rounded-xl hover:bg-orange-500 transition-all duration-500 font-medium transform hover:scale-105 hover:shadow-lg group">
                <span className="group-hover:translate-x-1 transition-transform duration-300 inline-block">Get Free Estimate</span>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Stats Section */}
      <section className="py-20 bg-gray-900 text-white relative overflow-hidden">
        <div className="absolute inset-0 bg-gradient-to-r from-gray-900 via-gray-800 to-gray-900"></div>
        <div className="max-w-7xl mx-auto px-6 relative z-10">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
            {[
              { number: "12", label: "Years Of Experience", suffix: "+" },
              { number: "85", label: "Success Project", suffix: "+" },
              { number: "15", label: "Active Project", suffix: "" },
              { number: "95", label: "Happy Customers", suffix: "%" }
            ].map((stat, index) => (
              <div 
                key={index} 
                className="space-y-3 group animate-fade-in-up hover:scale-110 transition-all duration-500"
                style={{ animationDelay: `${index * 150}ms` }}
              >
                <div className="text-5xl font-light text-orange-400 group-hover:text-orange-300 transition-colors duration-300 counter" data-target={stat.number}>
                  {stat.number}{stat.suffix}
                </div>
                <div className="text-gray-300 font-medium group-hover:text-white transition-colors duration-300">{stat.label}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Testimonials Section */}
      <section className="py-20" id="testimonials" data-animate>
        <div className="max-w-7xl mx-auto px-6">
          <div className="text-center mb-16">
            <h2 className="text-4xl font-serif text-gray-900 mb-6 animate-fade-in">
              What The People Thinks About Us
            </h2>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
            {[
              { 
                name: "Nattasha Mith", 
                location: "Sydney, USA",
                image: "https://picsum.photos/seed/testimonial1/150/150"
              },
              { 
                name: "Raymond Galario", 
                location: "Sydney, USA",
                image: "https://picsum.photos/seed/testimonial2/150/150"
              },
              { 
                name: "Benny Roll", 
                location: "Sydney, USA",
                image: "https://picsum.photos/seed/testimonial3/150/150"
              }
            ].map((testimonial, index) => (
              <div 
                key={index} 
                className="bg-white p-8 rounded-2xl shadow-sm border border-gray-100 hover:shadow-xl transition-all duration-500 transform hover:scale-105 animate-fade-in-up group"
                style={{ animationDelay: `${index * 200}ms` }}
              >
                <div className="flex items-center space-x-1 mb-6">
                  {[1,2,3,4,5].map((star) => (
                    <svg 
                      key={star} 
                      className="w-5 h-5 text-yellow-400 animate-twinkle transition-all duration-300 hover:scale-125" 
                      fill="currentColor" 
                      viewBox="0 0 24 24"
                      style={{ animationDelay: `${star * 100}ms` }}
                    >
                      <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
                    </svg>
                  ))}
                </div>
                <p className="text-gray-600 mb-6 leading-relaxed group-hover:text-gray-700 transition-colors duration-300">
                  "Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit."
                </p>
                <div className="flex items-center space-x-4">
                  <div className="w-12 h-12 bg-gradient-to-br from-orange-200 to-orange-300 rounded-full"></div>
                  <div>
                    <h4 className="font-semibold text-gray-900">{testimonial.name}</h4>
                    <p className="text-sm text-gray-500">{testimonial.location}</p>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Articles & News */}
      <section className="py-20 bg-white">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="text-center mb-16 animate-fade-in-up">
            <h2 className="text-4xl font-serif text-gray-900 mb-6">Articles & News</h2>
            <p className="text-gray-600 max-w-2xl mx-auto leading-relaxed">
              It is a long established fact that a reader will be distracted by the of readable content of a page when lookings at its layouts the points of using.
            </p>
          </div>
          
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
            {articles.map((article, index) => (
              <article key={index} className={`group cursor-pointer transform transition-all duration-700 hover:scale-105 hover:shadow-2xl animate-slide-up${index === 1 ? '-delay' : index === 2 ? '-delay-long' : ''}`}>
                <div className="bg-white border border-gray-100 shadow-lg hover:shadow-xl transition-all duration-500 rounded-[62px] overflow-hidden relative">
                  <div className="relative">
                    <div className="h-64 bg-gray-200 rounded-t-[45px] overflow-hidden">
                      <img 
                        src={article.image}
                        alt={article.title}
                        className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700"
                      />
                    </div>
                    {/* Tag */}
                    <div className="absolute top-4 left-4">
                      <div className="bg-white px-3 py-1 rounded-lg rounded-bl-none shadow-md">
                        <span className="text-sm text-gray-600">{article.category}</span>
                      </div>
                    </div>
                  </div>
                  
                  <div className="p-8">
                    <h3 className="text-xl font-serif text-gray-900 mb-4 line-clamp-2 group-hover:text-orange-600 transition-colors duration-300">
                      {article.title}
                    </h3>
                    <div className="flex items-center justify-between">
                      <span className="text-gray-500 text-sm">{article.date}</span>
                      <div className="w-8 h-8 bg-orange-500 rounded-full flex items-center justify-center group-hover:bg-orange-600 transition-colors duration-300">
                        <svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"/>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>

      {/* CTA Section */}
      <section className="py-20 mx-4 sm:mx-6 lg:mx-8">
        <div className="max-w-7xl mx-auto">
          <div className="bg-orange-500 rounded-[70px] px-8 py-16 text-center relative overflow-hidden">
            {/* Background decoration */}
            <div className="absolute inset-0 opacity-10">
              <div className="absolute top-10 left-10 w-32 h-32 border border-white rounded-full animate-twinkle"></div>
              <div className="absolute bottom-10 right-10 w-24 h-24 border border-white rounded-full animate-twinkle" style={{animationDelay: '1s'}}></div>
              <div className="absolute top-1/2 left-1/4 w-16 h-16 border border-white rounded-full animate-twinkle" style={{animationDelay: '2s'}}></div>
            </div>
            
            <div className="relative z-10 animate-fade-in-up">
              <h2 className="text-4xl font-serif text-white mb-4 animate-bounce-gentle">
                Wanna join the interno?
              </h2>
              <p className="text-white/90 mb-8 max-w-lg mx-auto animate-fade-in-delay">
                It is a long established fact will be distracted.
              </p>
              <button className="group bg-yellow-400 hover:bg-yellow-300 text-gray-900 px-8 py-4 rounded-[18px] font-medium transition-all duration-300 transform hover:scale-105 hover:shadow-xl flex items-center gap-3 mx-auto animate-slide-up">
                <span className="group-hover:translate-x-1 transition-transform duration-300 inline-block">Contact With Us</span>
                <svg className="w-5 h-5 group-hover:translate-x-1 transition-transform duration-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 8l4 4m0 0l-4 4m4-4H3"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer className="bg-white py-16 border-t border-gray-100">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
            {/* Company Info */}
            <div className="lg:col-span-1 animate-fade-in-left">
              <div className="text-2xl font-serif text-gray-900 hover:text-orange-500 transition-colors duration-300 mb-4">Interno</div>
              <p className="text-gray-600 mb-6 leading-relaxed">
                It is a long established fact that a reader will be distracted lookings.
              </p>
              <div className="flex space-x-4">
                <div className="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center text-white hover:bg-orange-600 transition-colors duration-300 cursor-pointer">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
                  </svg>
                </div>
                <div className="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center text-white hover:bg-orange-600 transition-colors duration-300 cursor-pointer">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M22.46 6c-.77.35-1.6.58-2.46.69.88-.53 1.56-1.37 1.88-2.38-.83.5-1.75.85-2.72 1.05C18.37 4.5 17.26 4 16 4c-2.35 0-4.27 1.92-4.27 4.29 0 .34.04.67.11.98C8.28 9.09 5.11 7.38 3 4.79c-.37.63-.58 1.37-.58 2.15 0 1.49.75 2.81 1.91 3.56-.71 0-1.37-.2-1.95-.5v.03c0 2.08 1.48 3.82 3.44 4.21a4.22 4.22 0 0 1-1.93.07 4.28 4.28 0 0 0 4 2.98 8.521 8.521 0 0 1-5.33 1.84c-.34 0-.68-.02-1.02-.06C3.44 20.29 5.7 21 8.12 21 16 21 20.33 14.46 20.33 8.79c0-.19 0-.37-.01-.56.84-.6 1.56-1.36 2.14-2.23z"/>
                  </svg>
                </div>
                <div className="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center text-white hover:bg-orange-600 transition-colors duration-300 cursor-pointer">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
                  </svg>
                </div>
                <div className="w-10 h-10 bg-orange-500 rounded-full flex items-center justify-center text-white hover:bg-orange-600 transition-colors duration-300 cursor-pointer">
                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                    <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.174-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.219-.359-1.219c0-1.142.662-1.995 1.482-1.995.699 0 1.037.219 1.037 1.178 0 .718-.219 1.795-.359 2.792-.199.839.419 1.219 1.257 1.219 1.482 0 2.62-1.561 2.62-3.818 0-1.995-1.436-3.39-3.498-3.39-2.38 0-3.778 1.78-3.778 3.627 0 .718.279 1.482.619 1.901.068.08.078.15.058.23-.059.239-.199.958-.219 1.096-.029.179-.098.219-.229.139-1.217-.559-1.975-2.323-1.975-3.737 0-3.038 2.204-5.823 6.358-5.823 3.339 0 5.934 2.38 5.934 5.554 0 3.318-2.093 5.986-4.994 5.986-.975 0-1.894-.508-2.204-1.117 0 0-.479 1.816-.599 2.265-.218.844-.81 1.903-1.208 2.547.908.279 1.875.429 2.873.429 6.624 0 11.99-5.367 11.99-11.988C24.007 5.367 18.641.001 12.017.001z"/>
                  </svg>
                </div>
              </div>
            </div>

            {/* Pages */}
            <div className="animate-fade-in-up">
              <h3 className="font-serif text-xl text-gray-900 mb-6">Pages</h3>
              <ul className="space-y-3">
                <li><a href="#" className="text-gray-600 hover:text-orange-600 transition-colors duration-300">About Us</a></li>
                <li><a href="#" className="text-gray-600 hover:text-orange-600 transition-colors duration-300">Our Projects</a></li>
                <li><a href="#" className="text-gray-600 hover:text-orange-600 transition-colors duration-300">Our Team</a></li>
                <li><a href="#" className="text-gray-600 hover:text-orange-600 transition-colors duration-300">Contact Us</a></li>
                <li><a href="#" className="text-gray-600 hover:text-orange-600 transition-colors duration-300">Services</a></li>
              </ul>
            </div>

            {/* Services */}
            <div className="animate-fade-in-up">
              <h3 className="font-serif text-xl text-gray-900 mb-6">Services</h3>
              <ul className="space-y-3">
                <li><a href="#" className="text-gray-600 hover:text-orange-600 transition-colors duration-300">Kitchan</a></li>
                <li><a href="#" className="text-gray-600 hover:text-orange-600 transition-colors duration-300">Living Area</a></li>
                <li><a href="#" className="text-gray-600 hover:text-orange-600 transition-colors duration-300">Bathroom</a></li>
                <li><a href="#" className="text-gray-600 hover:text-orange-600 transition-colors duration-300">Dinning Hall</a></li>
                <li><a href="#" className="text-gray-600 hover:text-orange-600 transition-colors duration-300">Bedroom</a></li>
              </ul>
            </div>

            {/* Contact */}
            <div className="animate-fade-in-right">
              <h3 className="font-serif text-xl text-gray-900 mb-6">Contact</h3>
              <div className="space-y-3">
                <p className="text-gray-600">55 East Birchwood Ave. Brooklyn, New York 11201</p>
                <p className="text-gray-600 hover:text-orange-600 transition-colors duration-300 cursor-pointer">contact@interno.com</p>
                <p className="text-gray-600">(123) 456 - 7890</p>
              </div>
            </div>
          </div>

          {/* Copyright */}
          <div className="border-t border-gray-200 pt-8 text-center animate-fade-in">
            <p className="text-gray-600 hover:text-gray-800 transition-colors duration-300">Copyright © Interno | Designed by Victorflow Templates - Powered by Webflow</p>
          </div>
        </div>
      </footer>

      <style dangerouslySetInnerHTML={{__html: `
        @keyframes fadeInLeft {
          from { opacity: 0; transform: translateX(-50px); }
          to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes fadeInRight {
          from { opacity: 0; transform: translateX(50px); }
          to { opacity: 1; transform: translateX(0); }
        }
        
        @keyframes fadeInUp {
          from { opacity: 0; transform: translateY(30px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        
        @keyframes slideUp {
          from { opacity: 0; transform: translateY(30px); }
          to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes kenBurns {
          0% { transform: scale(1) translateX(0px) translateY(0px); }
          50% { transform: scale(1.1) translateX(-10px) translateY(-5px); }
          100% { transform: scale(1) translateX(0px) translateY(0px); }
        }
        
        @keyframes kenBurnsSlow {
          0% { transform: scale(1); }
          50% { transform: scale(1.05); }
          100% { transform: scale(1); }
        }
        
        @keyframes twinkle {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { opacity: 0.7; transform: scale(1.1); }
        }
        
        @keyframes bounceGentle {
          0%, 100% { transform: translateY(0); }
          50% { transform: translateY(-5px); }
        }
        
        @keyframes pulseOrange {
          0%, 100% { color: rgb(249 115 22); }
          50% { color: rgb(251 146 60); }
        }
        
        .animate-fade-in-left {
          animation: fadeInLeft 1s ease-out;
        }
        
        .animate-fade-in-right {
          animation: fadeInRight 1s ease-out;
        }
        
        .animate-fade-in-up {
          animation: fadeInUp 0.8s ease-out;
        }
        
        .animate-fade-in {
          animation: fadeIn 1s ease-out;
        }
        
        .animate-fade-in-delay {
          animation: fadeIn 1s ease-out 0.3s both;
        }
        
        .animate-slide-up {
          animation: slideUp 1s ease-out 0.2s both;
        }
        
        .animate-slide-up-delay {
          animation: slideUp 1s ease-out 0.4s both;
        }
        
        .animate-slide-up-delay-long {
          animation: slideUp 1s ease-out 0.8s both;
        }
        
        .animate-ken-burns {
          animation: kenBurns 20s ease-in-out infinite;
        }
        
        .animate-ken-burns-slow {
          animation: kenBurnsSlow 15s ease-in-out infinite;
        }
        
        .animate-twinkle {
          animation: twinkle 2s ease-in-out infinite;
        }
        
        .animate-bounce-gentle {
          animation: bounceGentle 3s ease-in-out infinite;
        }
        
        .animate-pulse-slow {
          animation: pulseOrange 2s ease-in-out infinite;
        }
        
        .line-clamp-2 {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .line-clamp-3 {
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      `}} />
    </div>
  );
}